<template>
  <div class="p-2">
    <!-- 设备管理 - 摄像机管理 -->
    <!-- 查询表单 -->
    <el-card shadow="hover" style="margin-bottom: 8px">
      <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="100px">
        <el-form-item label="摄像机名称" prop="cameraName">
          <el-input v-model="queryParams.cameraName" placeholder="请输入摄像机名称" clearable style="width: 200px" />
        </el-form-item>
        <el-form-item label="设备编号" prop="deviceCode">
          <el-input v-model="queryParams.deviceCode" placeholder="请输入设备编号" clearable style="width: 200px" />
        </el-form-item>
        <el-form-item label="摄像机类型" prop="cameraType">
          <el-select v-model="queryParams.cameraType" placeholder="请选择类型" clearable style="width: 150px">
            <el-option label="全部" value="" />
            <el-option label="球机" value="dome" />
            <el-option label="枪机" value="bullet" />
            <el-option label="半球" value="turret" />
            <el-option label="鱼眼" value="fisheye" />
            <el-option label="全景" value="panoramic" />
          </el-select>
        </el-form-item>
        <el-form-item label="在线状态" prop="onlineStatus">
          <el-select v-model="queryParams.onlineStatus" placeholder="请选择状态" clearable style="width: 120px">
            <el-option label="全部" value="" />
            <el-option label="在线" value="1" />
            <el-option label="离线" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="录像状态" prop="recordStatus">
          <el-select v-model="queryParams.recordStatus" placeholder="请选择录像状态" clearable style="width: 120px">
            <el-option label="全部" value="" />
            <el-option label="录像中" value="1" />
            <el-option label="已停止" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="安装位置" prop="location">
          <el-input v-model="queryParams.location" placeholder="请输入安装位置" clearable style="width: 150px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 操作按钮 -->
    <el-card shadow="hover" style="margin-bottom: 8px">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="Plus" @click="handleAdd">新增摄像机</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate">修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="info" plain icon="VideoPlay" @click="handleBatchPreview" :disabled="multiple">批量预览</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary" plain icon="VideoCameraFilled" @click="handleBatchRecord" :disabled="multiple">批量录像</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 数据表格 -->
    <el-card shadow="hover">
      <el-table v-loading="loading" :data="cameraList" @selection-change="handleSelectionChange" border>
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="预览" width="120" align="center">
          <template #default="scope">
            <div class="camera-preview" @click="handlePreview(scope.row)">
              <img :src="scope.row.previewImage" alt="预览" style="width: 80px; height: 60px; object-fit: cover; cursor: pointer; border-radius: 4px;" />
              <div class="preview-overlay">
                <el-icon><VideoPlay /></el-icon>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="设备编号" prop="deviceCode" width="150" show-overflow-tooltip />
        <el-table-column label="摄像机名称" prop="cameraName" width="150" show-overflow-tooltip />
        <el-table-column label="摄像机类型" prop="cameraType" width="100" align="center">
          <template #default="scope">
            <el-tag :type="getCameraTypeTag(scope.row.cameraType)">{{ getCameraTypeText(scope.row.cameraType) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="分辨率" prop="resolution" width="100" align="center">
          <template #default="scope">
            <el-tag type="info" size="small">{{ scope.row.resolution }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="在线状态" prop="onlineStatus" width="100" align="center">
          <template #default="scope">
            <el-tag :type="getOnlineStatusTag(scope.row.onlineStatus)">{{ getOnlineStatusText(scope.row.onlineStatus) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="录像状态" prop="recordStatus" width="100" align="center">
          <template #default="scope">
            <el-tag :type="getRecordStatusTag(scope.row.recordStatus)">{{ getRecordStatusText(scope.row.recordStatus) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="云台功能" prop="ptzSupport" width="100" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.ptzSupport ? 'success' : 'info'" size="small">
              {{ scope.row.ptzSupport ? '支持' : '不支持' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="安装位置" prop="location" width="150" show-overflow-tooltip />
        <el-table-column label="IP地址" prop="ipAddress" width="130" show-overflow-tooltip />
        <el-table-column label="RTSP地址" prop="rtspUrl" width="200" show-overflow-tooltip>
          <template #default="scope">
            <el-tooltip :content="scope.row.rtspUrl" placement="top">
              <span class="rtsp-url">{{ scope.row.rtspUrl }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="存储空间" prop="storageUsage" width="120" align="center">
          <template #default="scope">
            <el-progress :percentage="scope.row.storageUsage" :color="getStorageColor(scope.row.storageUsage)" :stroke-width="8" />
            <span style="font-size: 12px; color: #666;">{{ scope.row.storageUsage }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="最后录像" prop="lastRecordTime" width="160" show-overflow-tooltip />
        <el-table-column label="备注" prop="remark" show-overflow-tooltip />
        <el-table-column label="操作" align="center" width="280" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-tooltip content="实时预览" placement="top">
              <el-button link type="primary" icon="VideoPlay" @click="handlePreview(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip content="云台控制" placement="top" v-if="scope.row.ptzSupport">
              <el-button link type="success" icon="Operation" @click="handlePtzControl(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip content="录像管理" placement="top">
              <el-button link type="warning" icon="VideoCameraFilled" @click="handleRecordManage(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip content="参数配置" placement="top">
              <el-button link type="info" icon="Setting" @click="handleConfig(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip content="修改" placement="top">
              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>

    <!-- 添加或修改摄像机对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="800px" append-to-body>
      <el-form ref="cameraFormRef" :model="form" :rules="rules" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="设备编号" prop="deviceCode">
              <el-input v-model="form.deviceCode" placeholder="请输入设备编号" :disabled="form.cameraId !== ''" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="摄像机名称" prop="cameraName">
              <el-input v-model="form.cameraName" placeholder="请输入摄像机名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="摄像机类型" prop="cameraType">
              <el-select v-model="form.cameraType" placeholder="请选择摄像机类型" style="width: 100%">
                <el-option label="球机" value="dome" />
                <el-option label="枪机" value="bullet" />
                <el-option label="半球" value="turret" />
                <el-option label="鱼眼" value="fisheye" />
                <el-option label="全景" value="panoramic" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分辨率" prop="resolution">
              <el-select v-model="form.resolution" placeholder="请选择分辨率" style="width: 100%">
                <el-option label="1920x1080" value="1920x1080" />
                <el-option label="1280x720" value="1280x720" />
                <el-option label="2560x1440" value="2560x1440" />
                <el-option label="3840x2160" value="3840x2160" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="IP地址" prop="ipAddress">
              <el-input v-model="form.ipAddress" placeholder="请输入IP地址" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="端口" prop="port">
              <el-input v-model="form.port" placeholder="请输入端口" type="number" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="form.username" placeholder="请输入用户名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码" prop="password">
              <el-input v-model="form.password" placeholder="请输入密码" type="password" show-password />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="RTSP地址" prop="rtspUrl">
              <el-input v-model="form.rtspUrl" placeholder="请输入RTSP流地址" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="安装位置" prop="location">
              <el-input v-model="form.location" placeholder="请输入安装位置" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="云台功能" prop="ptzSupport">
              <el-radio-group v-model="form.ptzSupport">
                <el-radio :label="true">支持</el-radio>
                <el-radio :label="false">不支持</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio label="1">启用</el-radio>
                <el-radio label="0">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="摄像机描述" prop="description">
          <el-input v-model="form.description" type="textarea" :rows="3" placeholder="请输入摄像机描述" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 实时预览对话框 -->
    <el-dialog title="实时预览" v-model="previewDialog.visible" width="900px" append-to-body>
      <div class="video-preview" v-if="previewDialog.data">
        <div class="video-container">
          <video 
            ref="videoRef" 
            :src="previewDialog.data.rtspUrl" 
            controls 
            autoplay 
            muted
            style="width: 100%; height: 400px; background: #000;"
          >
            您的浏览器不支持视频播放
          </video>
          <div class="video-info">
            <span>摄像机：{{ previewDialog.data.cameraName }}</span>
            <span>分辨率：{{ previewDialog.data.resolution }}</span>
            <span>位置：{{ previewDialog.data.location }}</span>
          </div>
        </div>
        <div class="video-controls" v-if="previewDialog.data.ptzSupport">
          <h4>云台控制</h4>
          <div class="ptz-controls">
            <el-row :gutter="10">
              <el-col :span="8">
                <el-button-group>
                  <el-button @click="ptzControl('up')">↑</el-button>
                  <el-button @click="ptzControl('down')">↓</el-button>
                  <el-button @click="ptzControl('left')">←</el-button>
                  <el-button @click="ptzControl('right')">→</el-button>
                </el-button-group>
              </el-col>
              <el-col :span="8">
                <el-button-group>
                  <el-button @click="ptzControl('zoomIn')">放大</el-button>
                  <el-button @click="ptzControl('zoomOut')">缩小</el-button>
                </el-button-group>
              </el-col>
              <el-col :span="8">
                <el-button-group>
                  <el-button @click="ptzControl('focusNear')">近焦</el-button>
                  <el-button @click="ptzControl('focusFar')">远焦</el-button>
                </el-button-group>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 录像管理对话框 -->
    <el-dialog title="录像管理" v-model="recordDialog.visible" width="800px" append-to-body>
      <div v-if="recordDialog.data">
        <el-row :gutter="20" style="margin-bottom: 20px;">
          <el-col :span="12">
            <el-card>
              <template #header>
                <span>录像控制</span>
              </template>
              <el-space direction="vertical" style="width: 100%;">
                <el-button type="primary" @click="startRecord" :disabled="recordDialog.data.recordStatus === '1'">开始录像</el-button>
                <el-button type="danger" @click="stopRecord" :disabled="recordDialog.data.recordStatus === '0'">停止录像</el-button>
                <el-button type="info" @click="downloadRecord">下载录像</el-button>
              </el-space>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card>
              <template #header>
                <span>录像信息</span>
              </template>
              <el-descriptions :column="1" size="small">
                <el-descriptions-item label="录像状态">
                  <el-tag :type="getRecordStatusTag(recordDialog.data.recordStatus)">{{ getRecordStatusText(recordDialog.data.recordStatus) }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="存储使用">{{ recordDialog.data.storageUsage }}%</el-descriptions-item>
                <el-descriptions-item label="最后录像">{{ recordDialog.data.lastRecordTime }}</el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>
        </el-row>
        <el-card>
          <template #header>
            <span>录像文件列表</span>
          </template>
          <el-table :data="recordFiles" border>
            <el-table-column label="文件名" prop="fileName" show-overflow-tooltip />
            <el-table-column label="录像时间" prop="recordTime" width="160" />
            <el-table-column label="文件大小" prop="fileSize" width="100" />
            <el-table-column label="时长" prop="duration" width="100" />
            <el-table-column label="操作" width="240" align="center">
              <template #default="scope">
                <el-button link type="primary" @click="playRecord(scope.row)">播放</el-button>
                <el-button link type="success" @click="downloadRecordFile(scope.row)">下载</el-button>
                <el-button link type="danger" @click="deleteRecordFile(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="CameraManage" lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Refresh, Plus, Edit, Delete, Download, VideoPlay, VideoCameraFilled, Operation, Setting } from '@element-plus/icons-vue'

// 响应式数据
const loading = ref(false)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const cameraList = ref([])
const recordFiles = ref([])
const videoRef = ref(null)

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  cameraName: '',
  deviceCode: '',
  cameraType: '',
  onlineStatus: '',
  recordStatus: '',
  location: ''
})

// 表单数据
const form = reactive({
  cameraId: '',
  deviceCode: '',
  cameraName: '',
  cameraType: '',
  resolution: '',
  ipAddress: '',
  port: '',
  username: '',
  password: '',
  rtspUrl: '',
  location: '',
  ptzSupport: false,
  status: '1',
  description: '',
  remark: ''
})

// 对话框
const dialog = reactive({
  visible: false,
  title: ''
})

// 预览对话框
const previewDialog = reactive({
  visible: false,
  data: null
})

// 录像对话框
const recordDialog = reactive({
  visible: false,
  data: null
})

// 表单验证规则
const rules = reactive({
  deviceCode: [{ required: true, message: '设备编号不能为空', trigger: 'blur' }],
  cameraName: [{ required: true, message: '摄像机名称不能为空', trigger: 'blur' }],
  cameraType: [{ required: true, message: '摄像机类型不能为空', trigger: 'change' }],
  resolution: [{ required: true, message: '分辨率不能为空', trigger: 'change' }],
  ipAddress: [{ required: true, message: 'IP地址不能为空', trigger: 'blur' }],
  rtspUrl: [{ required: true, message: 'RTSP地址不能为空', trigger: 'blur' }]
})

// 获取摄像机类型标签样式
const getCameraTypeTag = (type: string) => {
  switch (type) {
    case 'dome': return 'primary'
    case 'bullet': return 'success'
    case 'turret': return 'warning'
    case 'fisheye': return 'danger'
    case 'panoramic': return 'info'
    default: return 'primary'
  }
}

// 获取摄像机类型文本
const getCameraTypeText = (type: string) => {
  switch (type) {
    case 'dome': return '球机'
    case 'bullet': return '枪机'
    case 'turret': return '半球'
    case 'fisheye': return '鱼眼'
    case 'panoramic': return '全景'
    default: return '未知'
  }
}

// 获取在线状态标签样式
const getOnlineStatusTag = (status: string) => {
  switch (status) {
    case '1': return 'success'
    case '0': return 'danger'
    default: return 'info'
  }
}

// 获取在线状态文本
const getOnlineStatusText = (status: string) => {
  switch (status) {
    case '1': return '在线'
    case '0': return '离线'
    default: return '未知'
  }
}

// 获取录像状态标签样式
const getRecordStatusTag = (status: string) => {
  switch (status) {
    case '1': return 'success'
    case '0': return 'info'
    default: return 'info'
  }
}

// 获取录像状态文本
const getRecordStatusText = (status: string) => {
  switch (status) {
    case '1': return '录像中'
    case '0': return '已停止'
    default: return '未知'
  }
}

// 获取存储空间颜色
const getStorageColor = (usage: number) => {
  if (usage >= 90) return '#F56C6C'
  if (usage >= 70) return '#E6A23C'
  return '#67C23A'
}

// 查询摄像机列表
const getList = () => {
  loading.value = true
  // 模拟数据
  setTimeout(() => {
    cameraList.value = [
      {
        cameraId: 'CAM001',
        deviceCode: 'CAM_DOME_001',
        cameraName: '大门口球机',
        cameraType: 'dome',
        resolution: '1920x1080',
        onlineStatus: '1',
        recordStatus: '1',
        ptzSupport: true,
        ipAddress: '192.168.1.200',
        port: '554',
        rtspUrl: 'rtsp://192.168.1.200:554/stream1',
        location: '主入口大门',
        storageUsage: 65,
        lastRecordTime: '2024-01-15 14:30:25',
        previewImage: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=security%20camera%20dome%20surveillance%20entrance%20gate&image_size=landscape_4_3',
        createTime: '2024-01-10 09:00:00',
        description: '主入口监控，24小时录像',
        remark: '重要监控点'
      },
      {
        cameraId: 'CAM002',
        deviceCode: 'CAM_BULLET_001',
        cameraName: '停车场枪机',
        cameraType: 'bullet',
        resolution: '1280x720',
        onlineStatus: '1',
        recordStatus: '0',
        ptzSupport: false,
        ipAddress: '192.168.1.201',
        port: '554',
        rtspUrl: 'rtsp://192.168.1.201:554/stream1',
        location: '地下停车场',
        storageUsage: 45,
        lastRecordTime: '2024-01-15 12:15:30',
        previewImage: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=security%20camera%20bullet%20parking%20garage%20surveillance&image_size=landscape_4_3',
        createTime: '2024-01-10 10:00:00',
        description: '停车场监控',
        remark: '定时录像'
      },
      {
        cameraId: 'CAM003',
        deviceCode: 'CAM_FISHEYE_001',
        cameraName: '会议室鱼眼',
        cameraType: 'fisheye',
        resolution: '2560x1440',
        onlineStatus: '0',
        recordStatus: '0',
        ptzSupport: false,
        ipAddress: '192.168.1.202',
        port: '554',
        rtspUrl: 'rtsp://192.168.1.202:554/stream1',
        location: '一楼会议室',
        storageUsage: 20,
        lastRecordTime: '2024-01-14 18:00:00',
        previewImage: 'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=fisheye%20security%20camera%20conference%20room%20surveillance&image_size=landscape_4_3',
        createTime: '2024-01-10 11:00:00',
        description: '会议室全景监控',
        remark: '设备离线，需要检修'
      }
    ]
    total.value = 3
    loading.value = false
  }, 1000)
}

// 搜索
const handleQuery = () => {
  queryParams.pageNum = 1
  getList()
}

// 重置
const resetQuery = () => {
  queryParams.cameraName = ''
  queryParams.deviceCode = ''
  queryParams.cameraType = ''
  queryParams.onlineStatus = ''
  queryParams.recordStatus = ''
  queryParams.location = ''
  handleQuery()
}

// 多选框选中数据
const handleSelectionChange = (selection: any[]) => {
  ids.value = selection.map(item => item.cameraId)
  single.value = selection.length !== 1
  multiple.value = !selection.length
}

// 新增按钮操作
const handleAdd = () => {
  reset()
  dialog.visible = true
  dialog.title = '添加摄像机'
}

// 修改按钮操作
const handleUpdate = (row?: any) => {
  reset()
  const cameraId = row?.cameraId || ids.value[0]
  // 模拟获取详情
  const camera = cameraList.value.find(item => item.cameraId === cameraId)
  if (camera) {
    Object.assign(form, camera)
  }
  dialog.visible = true
  dialog.title = '修改摄像机'
}

// 实时预览
const handlePreview = (row: any) => {
  previewDialog.data = row
  previewDialog.visible = true
}

// 云台控制
const handlePtzControl = (row: any) => {
  previewDialog.data = row
  previewDialog.visible = true
  ElMessage.info('云台控制功能已在预览窗口中')
}

// 录像管理
const handleRecordManage = (row: any) => {
  recordDialog.data = row
  recordDialog.visible = true
  // 模拟录像文件列表
  recordFiles.value = [
    {
      fileName: 'record_20240115_140000.mp4',
      recordTime: '2024-01-15 14:00:00',
      fileSize: '256MB',
      duration: '01:30:25'
    },
    {
      fileName: 'record_20240115_120000.mp4',
      recordTime: '2024-01-15 12:00:00',
      fileSize: '180MB',
      duration: '01:05:15'
    }
  ]
}

// 参数配置
const handleConfig = (row: any) => {
  ElMessage.info('跳转到摄像机参数配置页面：' + row.cameraName)
}

// 批量预览
const handleBatchPreview = () => {
  ElMessage.info('批量预览功能开发中')
}

// 批量录像
const handleBatchRecord = () => {
  ElMessage.info('批量录像功能开发中')
}

// 云台控制
const ptzControl = (action: string) => {
  ElMessage.success(`云台${action}控制指令已发送`)
}

// 开始录像
const startRecord = () => {
  ElMessage.success('开始录像')
  if (recordDialog.data) {
    recordDialog.data.recordStatus = '1'
  }
}

// 停止录像
const stopRecord = () => {
  ElMessage.success('停止录像')
  if (recordDialog.data) {
    recordDialog.data.recordStatus = '0'
  }
}

// 下载录像
const downloadRecord = () => {
  ElMessage.success('录像下载任务已创建')
}

// 播放录像
const playRecord = (record: any) => {
  ElMessage.info('播放录像：' + record.fileName)
}

// 下载录像文件
const downloadRecordFile = (record: any) => {
  ElMessage.success('下载录像文件：' + record.fileName)
}

// 删除录像文件
const deleteRecordFile = (record: any) => {
  ElMessageBox.confirm('确认删除录像文件"' + record.fileName + '"？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('删除成功')
  })
}

// 删除按钮操作
const handleDelete = (row?: any) => {
  const cameraIds = row?.cameraId ? [row.cameraId] : ids.value
  ElMessageBox.confirm('是否确认删除摄像机编号为"' + cameraIds + '"的数据项？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('删除成功')
    getList()
  })
}

// 导出按钮操作
const handleExport = () => {
  ElMessage.success('导出成功')
}

// 提交按钮
const submitForm = () => {
  ElMessage.success('操作成功')
  dialog.visible = false
  getList()
}

// 取消按钮
const cancel = () => {
  dialog.visible = false
  reset()
}

// 表单重置
const reset = () => {
  form.cameraId = ''
  form.deviceCode = ''
  form.cameraName = ''
  form.cameraType = ''
  form.resolution = ''
  form.ipAddress = ''
  form.port = ''
  form.username = ''
  form.password = ''
  form.rtspUrl = ''
  form.location = ''
  form.ptzSupport = false
  form.status = '1'
  form.description = ''
  form.remark = ''
}

// 组件挂载
onMounted(() => {
  getList()
})
</script>

<style scoped>
.mb8 {
  margin-bottom: 8px;
}

.camera-preview {
  position: relative;
  display: inline-block;
}

.preview-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 20px;
  opacity: 0;
  transition: opacity 0.3s;
}

.camera-preview:hover .preview-overlay {
  opacity: 1;
}

.rtsp-url {
  font-family: monospace;
  font-size: 12px;
  color: #666;
}

.video-preview {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.video-container {
  position: relative;
}

.video-info {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 4px;
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}

.video-controls {
  padding: 20px;
  background: #f9f9f9;
  border-radius: 4px;
}

.ptz-controls {
  margin-top: 10px;
}
</style>